

<template>
	<div class="dialogBox">
		<el-dialog v-model="dialogVisible" :before-close="handleClose" align-center :show-close="false"
			style="background-color: transparent;">
			<div id="box">
				<span class="span1"></span>
				<span class="span2"></span>
				<span class="close" @click="dialogVisible=false">
					<img :src="getPublic('login/路径 3@2x.png')" alt="">
				</span>
				<div class="leftBox">
					<h2>画境Ai账号</h2>
					<input type="text" v-model="spec.phone" placeholder="请输入手机号">
					<div class="code">
						<input type="text" v-model="spec.login_code" placeholder="请输入验证码" @keyup.enter="logCode()">
						<p @click="getCode()" :class="getCodeBtnDisabled ? 'waitTime' : ''">
							{{ codeBtnWord }}
						</p>
					</div>
					<div class="agreeBox">
						<input type="checkbox" v-model="agreeCheck" class="agree" @click="agreeCheck = !agreeCheck" />
						<p @click="agreeCheck = !agreeCheck">我已阅读并同意<a href="/html/皮皮动画用户服务协议.html"
								target="_blank">用户协议</a>、
							<a href="/html/皮皮动画隐私政策.html" target="_blank">隐私协议</a>
						</p>
						<button style="cursor: pointer;" @click="logCode()"> 登录</button>
					</div>

				</div>
				<span class="imgSpan"></span>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import axios from "axios"
import { useRouter } from "vue-router"
import { setInfo, isLoggedIn } from "../hooks/auth"
import { getPublic } from "../request/getPublic"
const dialogVisible = ref(false) //按钮禁用属性的变量
const agreeCheck = ref(false) //  用户协议是否勾选
const router = useRouter()



const spec = reactive({
	phone: "",
	login_code: "",
	channel:"ArtsAi"

}) //创建请求数据相对应的响应式对象

const props = defineProps<{
	loginVisible: any
}>()


watch(props.loginVisible, (newVal, oldVal) => {
	dialogVisible.value = true
})


//点右上角'x'按纽及点到弹窗区域外时的确认提醒，防止误触
const handleClose = (done: () => void) => {
	// 	ElMessageBox.confirm("您还没完成登录操作，确认取消登录？", {
	// 		confirmButtonText: "确认取消",
	// 		cancelButtonText: "继续登录",
	// 		type: "warning",
	// 	})
	// 		.then(() => {
	// 			done()
	// 		})
	// 		.catch(() => {
	// 			// catch error
	// 		})
}

//获取验证码功能实现
const getCodeBtnDisabled = ref(false)
let countCode = 60
const codeBtnWord = ref("获取验证码")
const getCode = () => {
	if (!spec.phone) {
		ElMessage({
			message: "请输入您的手机号",
			type: "error",
		})
		return false
	}
	try {
		//利用axios发送post请求获取手机验证码
		axios({
			method: "post",
			url: "https://api.pencil-stub.com/user/login/get-code",
			data: {
				spec: {
					phone: spec.phone,
				},
			},
		})
			.then((res) => {
				let { code } = res.data //提取响应数据
				if (code === 200) {
					ElMessage({
						message: "验证码发送成功",
						type: "success",
					})
					//发送验证码后60s倒计时及按钮禁用
					getCodeBtnDisabled.value = true
					let countDown = setInterval(() => {
						if (countCode > 1) {
							countCode--
							codeBtnWord.value = `${countCode}s后重新发送`
						} else {
							clearInterval(countDown)
							codeBtnWord.value = "重新获取验证码"
							getCodeBtnDisabled.value = false
							countCode = 60
						}
					}, 1000)
				} else {
					ElMessage({
						message: "获取失败，请重试",
						type: "error",
					})
				}
			})
			.catch((err) => {
				throw err
			})
	} catch (e) {
		console.error(e)
	}
}

//点击确认登录，根据手机号和验证码进行登录
const logCode = () => {
	if (!agreeCheck.value) {
		ElMessageBox.confirm("同意用户协议和隐私协议后才能登录", {
			confirmButtonText: "OK",
			showCancelButton: false,
			showClose: false,
			type: "warning",
		})
	} else {
		axios({
			method: "post",
			url: "https://api.pencil-stub.com/user/login",
			data: {
				spec,
				channel:"ArtsAi"
			},
		})
			.then((res) => {
				let { code } = res.data
				if (code === 200) {
					ElMessage({
						message: "登录成功",
						type: "success",
					})
					//保持登录状态
					const { data } = res.data
					//将信息保存进localStorage
					setInfo(data)
					dialogVisible.value = false //设置弹窗消失
					//  跳转到AI数字人视频
					// router.push({ name: "image" })
					location.reload();
				} else {
					let { msg } = res.data
					ElMessage({
						message: msg,
						type: "warning",
					})
				}
			})
			.catch((err) => {
				throw err
			})
	}
}

</script>
<style scoped>
#box .imgSpan {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	width: 261px;
	height: 289px;
	opacity: 1;
	background: url(https://img.js.design/assets/img/6540be19628f25e2e04f7bd2.png#6c5f9edad44e76e54bd3876e509df54b) no-repeat;
	background-size: contain;
	background-position: center center;
}

.agreeBox button {
	margin-top: 40px;
	width: 280px;
	height: 43.46px;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(255, 241, 87, 1) 0%, rgba(255, 195, 0, 1) 100%);
	border: 0px;

	font-size: 17px;
	font-weight: 400;
	color: rgba(2, 46, 87, 1);
}

.agreeBox {
	margin-top: 20px;
}

.agreeBox a {
	color: rgba(56, 56, 56, 1);
}

.agreeBox p {
	cursor: pointer;
	display: inline-block;
	line-height: 16px;
	color: rgba(128, 128, 128, 1);
	margin-left: 6px;
}




.agree {
	width: 16px;
	height: 16px;
	border: 1px solid rgba(128, 128, 128, 1);
	display: inline-block;
	transform: translateY(18%);
}

input {
	width: 380px;
	height: 60px;
	margin-top: 23px;
	opacity: 1;
	border-radius: 50px;
	background: rgba(242, 242, 242, 1);
	padding: 0 20px;
	box-sizing: border-box;
	font-size: 18px;
	font-weight: 400;
	color: rgba(166, 166, 166, 1);
	border: 0px;
}

.code .waitTime {
	color: rgba(166, 166, 166, 1);
}

.code p {
	cursor: pointer;
	position: absolute;
	right: 40px;
	top: calc(50% + 23px);
	transform: translateY(-50%);
	font-size: 18px;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
}

.code {
	position: relative;
	height: 60px;
}

h2 {
	opacity: 1;
	font-size: 30px;
	font-weight: 700;
	color: rgba(0, 0, 0, 1);
	text-align: center;
	margin-top: 33px;
}

.leftBox {
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 427px;
	height: 427px;
	opacity: 1;
	border-radius: 20px;
	background: rgba(255, 255, 255, 1);
	z-index: 10;
}
.close{
position: absolute;
right: 20px;
cursor: pointer;
display: inline-block;
width: 28.43px;
height: 28.43px;
opacity: 1;
background: url('/src/assets/login/路径 2@2x.png') no-repeat;
background-size: contain;
background-position: center center;
z-index: 10;
}
.close img{
width: 12.23px;
height: 12.22px;
position: absolute;
top: 50%;
left: 50%;
display: block;
transform: translate(-50% , -50%);


}
.span2 {
	position: absolute;
	left: 127px;
	top: 0px;
	width: 335.78px;
	height: 274.94px;
	opacity: 0.5;
	transform: rotate(19.57deg);
	background: rgba(126, 255, 46, 0.59);
	filter: blur(100px);
}

.span1 {
	position: absolute;
	left: 4.98px;
	top: 0px;
	width: 132.23px;
	height: 174.2px;
	opacity: 1;
	transform: rotate(-89.68deg);
	background: linear-gradient(118.66deg, rgba(255, 241, 87, 1) 0%, rgba(238, 255, 82, 0) 100%);
	filter: blur(100px);

}

#box {
	position: relative;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;
}

:deep(.el-dialog__header) {
	display: none;
}

:deep(.el-overlay-dialog) {
	background-color: rgba(56, 56, 56, 0.5);
	z-index: 10;
}

:deep(.el-dialog__body) {
	margin: 0;
	padding: 0;
	background: transparent;
}

:deep(.el-dialog #box) {
	width: 773px;
	height: 489px;
	border-radius: 30px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 235, 187, 1) 100%);
	box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.25);
}
</style>
